<template>
	<van-popup :show="is_show" custom-style="background: transparent;">
		<view class="coupon_wrapper">
			<image src="../../../static/image/index/j@2x.png" mode="widthFix" class="bg_img"></image>
			<view class="coupon_content">
				<!-- <view class="font_19 color_7b des">可在“我的-优惠券”查看</view> -->
				<view class="font_19 color_7b des"></view>
				<view class="coupon_ul">
					<view class="coupon_list" v-for="item in coupon_list" :key="item.id">
						<image src="../../../static/image/index/k@2x.png"></image>
						<view class="coupon_center flex3">
							<view class="coupon_left">
								<view class="font_27 text_bold">{{item.name}}</view>
								<view class="font_19 color_7b coupon_m1">
									有效期：{{item.activity_start_time_text}}-{{item.activity_end_time_text}}</view>
							</view>
							<view class="coupon_right color_fff">
								<view class="flex5">
									<!-- <view class="font_23 coupon_m2">￥</view> -->
									<view class="font_42 text_bold">{{item.max_amount}}元</view>
								</view>
								<view class="font_19">满{{item.max_price}}元可用</view>
							</view>
						</view>
					</view>
				</view>
				<view class="coupon_btn" @click="get_draw">
					<image src="../../../static/image/index/l@2x.png"></image>
				</view>
			</view>
		</view>
	</van-popup>
</template>

<script>
	export default {
		props: {
			is_show: {
				type: Boolean
			},
			coupon_list: {
				type: Array
			}
		},
		data() {
			return {

			}
		},
		methods: {
			get_draw() {
				this.$http.get(this.$api.receiveNewUserCoupon).then(res => {
					getApp().get_msg('领取成功');
					this.$emit('close');
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.coupon_wrapper {
		width: 530rpx;
		position: relative;

		.bg_img {
			width: 100%;
			height: 100%;
		}

		.coupon_content {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			position: absolute;
		}
	}

	.des {
		text-align: center;
		margin: 180rpx 0 13rpx;
		// margin: 128rpx 0 13rpx;
	}

	.coupon_ul {
		height: 288rpx;
		padding: 0 42rpx;
		overflow-y: auto;

		.coupon_list {
			width: 100%;
			height: 137rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.coupon_center {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				position: absolute;
			}

			.coupon_left {
				flex: 8;
				padding: 0 10rpx 0 12rpx;
				box-sizing: border-box;
			}

			.coupon_right {
				flex: 4;
				text-align: center;
			}
		}
	}

	.coupon_m1 {
		margin: 12rpx 0 0 0;
	}

	.coupon_m2 {
		margin: 0 4rpx 8rpx 0;
	}

	.coupon_btn {
		width: 338rpx;
		height: 79rpx;
		margin: 134rpx auto 0;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
